import { h, defineComponent } from 'vue'
import { ElTag } from 'element-plus'
import type { TagProps } from 'element-plus'

// 状态标签配置接口
interface StatusConfig {
  text: string
  type: TagProps['type']
}

// 状态映射配置
const STATUS_CONFIG: Record<number, StatusConfig> = {
  0: { text: '待申请', type: 'info' },
  1: { text: '部·审批中', type: 'warning' },
  2: { text: '部·通过', type: 'success' },
  3: { text: '部·不通过', type: 'danger' },
  4: { text: '学校·审批中', type: 'warning' },
  5: { text: '学校·审批通过', type: 'success' },
  6: { text: '学校·不通过', type: 'danger' },
}

/**
 * 获取申请状态标签配置
 */
function getStatusTag(status: number, isPublished: number): StatusConfig {
  // 只有在学校审核阶段（status >= 4）才考虑isPublished字段
  if (status >= 4 && isPublished === 0) {
    return { text: '审批中', type: 'warning' }
  }

  // 其他情况直接返回对应的状态配置
  return STATUS_CONFIG[status] || { text: '未知状态', type: 'info' }
}

// 缓存组件实例，避免重复创建
const componentCache = new Map<string, ReturnType<typeof defineComponent>>()

/**
 * 状态标签 Hook
 * @param status 状态值
 * @param isPublished 是否已发布
 * @returns 渲染的 ElTag 组件
 */
export function useStatusTag(status: number, isPublished: number) {
  const tagConfig = getStatusTag(status, isPublished)

  // 创建缓存键，确保相同配置的标签使用同一个组件实例
  const cacheKey = `${tagConfig.text}-${tagConfig.type}`

  if (!componentCache.has(cacheKey)) {
    // 调试：记录组件创建
    console.log(`🏷️ StatusTag component created for: ${tagConfig.text}`)

    // 创建并缓存组件
    const component = defineComponent({
      name: `StatusTag_${cacheKey}`,
      setup() {
        return () => h(ElTag, { type: tagConfig.type }, () => tagConfig.text)
      },
    })

    componentCache.set(cacheKey, component)
  }

  return componentCache.get(cacheKey)!
}
